<template>
    <div class="mysub-view">
        <el-button class="back-btn" type="primary" @click="back" :icon="ArrowLeftBold" />
        <div class="body">

            <el-table :data="dataList.data" border style="width: 97%;margin: 0 auto ;">
                <el-table-column prop="id" label="id" width="70" align="center" />
                <el-table-column prop="date" label="提交日期" align="center" />
                <el-table-column prop="city" label="城市" align="center" width="100" />
                <el-table-column prop="estimateAqi" label="预估污染等级" align="center " width="120">
                    <template #default="scope">
                        <el-tag effect="plain" :color="color[scope.row.estimateAqi - 1]" style="width: 20px;
                        height: 20px;">
                        </el-tag>
                        <div>{{ scope.row.estimateAqi + '级污染' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="异常描述" align="center" />
                <el-table-column prop="status" width="100" label="状态" align="center">
                    <template #default="scope">
                        <el-tag type="primary" v-if="scope.row.status == 1">已派遣</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.status == 0">未派遣</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 2">测量完毕</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="co" label="一氧化碳(CO)/(ug/m3)" align="center">
                    <template #default="scope">
                        <div>{{ scope.row.co ? scope.row.co : '未测量' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="so2" label="二氧化硫(SO2)/(ug/m3)" align="center">
                    <template #default="scope">
                        <div>{{ scope.row.so2 ? scope.row.so2 : '未测量' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="pm2_5" label="悬浮颗粒物(PM2.5)/(ug/m3)" align="center">
                    <template #default="scope">
                        <div>{{ scope.row.pm ? scope.row.pm : '未测量' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="aqi" label="测量结果等级" align="center" width="120">
                    <template #default="scope">
                        <div v-if="scope.row.aqi !== 0">
                            <el-tag effect="plain" :color="color[scope.row.aqi - 1]" style="width: 20px;height: 20px;">
                            </el-tag>
                            <div>{{ scope.row.aqi + '级污染' }}</div>
                        </div>
                        <div v-else>{{ '未测量' }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                    <template #default="scope">
                        <el-button v-if="scope.row.aqi != 0" link type="primary" size="small"
                            @click="check(scope.row.city, scope.row.co, scope.row.so2, scope.row.pm, scope.row.aqi)">查看数据统计</el-button>
                        <el-button v-else link type="primary" size="small" disabled>暂无测量结果结果</el-button>
                        <!-- <el-button link type="primary" size="small">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: center;">
                <el-pagination style="margin: 20px 0;" background layout="prev, pager, next,total"
                    :total="tablePage.totalCount" @current-change="currentChange" />
            </div>
            <el-dialog v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="40%" @close="close()">
                <!-- <div>
                    {{ '' + dialog.pm +
                        dialog.so2 +
                        dialog.co +
                        dialog.aqi }}
                </div> -->
                <div ref="chartsRef" class="charts"></div>
            </el-dialog>

        </div>
    </div>
</template>

<script setup lang="ts">
import { inject, onMounted, onUpdated, reactive, ref } from "vue"
import { useRouter } from "vue-router"
import * as echarts from 'echarts'
import { get } from '../../utils/index.ts'
const Message = inject('$message') as any

import {
    ArrowLeftBold
} from '@element-plus/icons-vue'
const router = useRouter()
const showWin: any = inject('showWin')

const back = () => {
    router.back()
    showWin.value = true
}

const getList = async () => {
    let data = {
        page: tablePage.pageIndex,
        limit: 10,
    }
    let res: any = await get('/sys/referdate/Plist', data)
    if (res && res.code === 0) {
        dataList.data = res.page.list
        tablePage.pageIndex = res.page.currPage
        tablePage.totalCount = res.page.totalCount
        tablePage.totalPage = res.page.totalPage
    } else {
        Message.info(`${res.code}:${res.msg}`)
    }
}

let dataList = reactive({
    data: []
})
const tablePage = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,//数据条数
    totalPage: 1,//页数
    currentChange: (e: any) => {
        tablePage.pageIndex = e
        getList()
    }
})
const { currentChange } = tablePage


const dialog = reactive({
    dialogVisible: false,
    dialogTitle: '',
    pm: 0,
    co: 0,
    so2: 0,
    aqi: 0,
    data: {

    },
    close: () => {
        dialog.dialogVisible = false
        dialog.dialogTitle = ''
        dialog.pm = 0
        dialog.so2 = 0
        dialog.co = 0
        dialog.aqi = 0
    },
    check: (city: any, co: any, so2: any, pm: any, aqi: any) => {
        dialog.dialogVisible = true
        dialog.dialogTitle = `${city}的测量结果`
        dialog.pm = pm
        dialog.so2 = so2
        dialog.co = co
        dialog.aqi = aqi

    },
})
const { close, check } = dialog

const chartsRef: any = ref(null)
const color = ['#02E300', '#FFFF00', '#FF7E00', '#FE0000', '#98004B', '#7E0123']
const option = {
    title: {
        text: '空气污染物指标'
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: true,
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    legend: {
        data: ['平均浓度(ug/m3)']
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['一氧化碳(CO)', '二氧化硫(SO2)', '悬浮颗粒物(PM2.5)']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            type: 'bar',

            data:
                [{
                    value: 0,
                    itemStyle: {
                        color: '#4094ac'
                    }
                }, {
                    value: 0,
                    itemStyle: {
                        color: '#a74341'
                    }
                }, {
                    value: 0,
                    itemStyle: {
                        color: '#d8813c'
                    }
                }]
        }
    ]
}
const chartsInit = () => {
    option.series[0].data[0].value = dialog.co
    option.series[0].data[1].value = dialog.so2
    option.series[0].data[2].value = dialog.pm
    const view = echarts.init(chartsRef.value)
    view.setOption(option)
}
onMounted(() => {
    getList()
    const data = [] as any
    data.map((k, i) => {

    })

})

onUpdated(() => {

    const bool = dialog.dialogVisible && dialog.pm != 0 && dialog.so2 != 0 && dialog.co != 0 && dialog.aqi != 0
    if (bool) {
        chartsInit()
    }
})

</script>

<style scoped lang="scss">
.mysub-view {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 80px;
    box-sizing: border-box;

    .back-btn {
        position: absolute;
        top: 15px;
        left: 15px;
    }

    .body {

        background-color: #f2f3f5;
        width: 100%;
        // height: 100%;
        border-radius: 20px;
        padding: 20px 0 0;
    }

    .charts {
        // text-align: center;
        display: flex;
        justify-content: center;
        // background-color: pink;
        width: 700px;
        height: 400px;
    }
}
</style>